<template>
  <div class="header" :style="{ 'background-color': color }">
    <div style="cursor: pointer">
      <i
        :class="
          this.$store.state.isCollapse === false
            ? 'el-icon-s-fold'
            : 'el-icon-s-unfold'
        "
        @click="close"
      ></i>
    </div>
    <div class="logo">新闻后台管理系统</div>
    <div class="user-info">
      <div class="theme">
        <div class="theme-font">
          <i class="el-icon-loading"></i>
        </div>
        <el-color-picker
          v-model="color"
          show-alpha
          :predefine="predefineColors"
        ></el-color-picker>
      </div>
      <el-dropdown>
        <h3 class="loginadmin">
          管理员：<i class="el-icon-s-custom"></i>{{ username }}
        </h3>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <span @click="logout"> 管理员退出 </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { logout } from "@/api/login";
import { removeToken } from "@/request/auth";

export default {
  name: "Header",
  data() {
    return {
      color: "#545c64",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
    };
  },
  watch: {
    color: {
      handler(newColor, oldColor) {
        if (newColor) {
          this.$store.commit("SET_COLOR", this.color);
        }
      },
      immediate: true,
    },
  },
  computed: {
    username() {
      return localStorage.getItem("USERNAME");
    },
  },
  methods: {
    logout() {
      logout()
        .then(() => {
          removeToken();
          localStorage.removeItem("USERNAME");
        })
        .catch((err) => {
          console.log(err);
        });
      this.$router.push("/login");
    },
    close() {
      this.$store.state.isCollapse === false
        ? this.$store.commit("SET_ISCOLLAPSE", true)
        : this.$store.commit("SET_ISCOLLAPSE", false);
    },
  },
};
</script>

<style>
.header {
  position: relative;
  box-sizing: border-box;
  display: flex;
  min-width: 1500px;
  width: 100%;
  height: 70px;
  font-size: 22px;
  line-height: 70px;
  /* background-color: #545c64; */
}
.header .logo {
  float: left;
  width: 250px;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777,
    0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333,
    0px 8px 7px #001135;
}

.user-info {
  display: flex;
  margin-left: 750px;
  padding-right: 50px;
  font-size: 16px;
  color: #fff;
}
.theme{
  display: flex;
  margin-top: 15px;
  margin-right: 20px;
}
.theme-font {
  margin-right: 5px;
  font-size: 25px;
}
.user-info .el-dropdown-link {
  position: relative;
  display: inline-block;
  padding-left: 50px;
  color: #fff;
  cursor: pointer;
  vertical-align: middle;
}
.user-info .user-logo {
  position: absolute;
  left: 0;
  top: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.loginadmin {
  cursor: pointer;
  color: white;
  text-shadow: 2px 2px 5px red;
}
.el-dropdown-menu__item {
  text-align: center;
}
</style>
